<template>
	<div id="container">
		<statistics>
			<template #img><img src="../../assets/images/比例.png" alt="" /></template>
			<template #header>运单状态</template>
			<template #subhead>Real-time monitoring</template>
		</statistics>
		<div ref="chart" class="chart" />
	</div>
</template>
<script>
	import * as echarts from 'echarts';
	import statistics from '@/components/statistics.vue';
	import { fontSize } from '@/common/fontSize';
	export default {
		props: {
			chartData: {
				default: () => {
					return {};
				},
			},
		},
		components: {
			statistics,
		},
		data() {
			return {
				statusChart: '',
			};
		},
		computed: {},
		mounted() {
			this.initChart();
			window.addEventListener('resize', () => {
				// 判断是否存在，直接调用resize方法
				if (this.statusChart) this.statusChart.resize();
			});
		},
		methods: {
			initChart() {
				this.statusChart = echarts.init(this.$refs.chart);
				const chartData = [
					{
						value: 520,
						name: '待支付',
					},
					{
						value: 90,
						name: '已到账',
					},
					{
						value: 280,
						name: '已申请开票',
					},
					{
						value: 100,
						name: '待发货',
					},
					{
						value: 100,
						name: '在途',
					},
				];
				const colorList = [
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: '#CA8CCA',
						},
						{
							offset: 1,
							color: '#EFA5BB',
						},
					]),
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: '#A4D37D',
						},
						{
							offset: 1,
							color: '#E5F2A7',
						},
					]),
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: '#BFA4E4',
						},
						{
							offset: 1,
							color: '#E29CE2',
						},
					]),
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: '#A8AAE5',
						},
						{
							offset: 1,
							color: '#BEA3E3',
						},
					]),
					new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'pink',
						},
						{
							offset: 1,
							color: 'red',
						},
					]),
				];
				const sum = chartData.reduce((per, cur) => per + cur.value, 0);
				const gap = (1 * sum) / 100;
				const pieData1 = [];
				const pieData2 = [];
				const gapData = {
					name: '',
					value: gap,
					itemStyle: {
						color: 'transparent',
					},
				};
				for (let i = 0; i < chartData.length; i++) {
					pieData1.push({
						...chartData[i],
						itemStyle: {
							borderRadius: 100,
							shadowColor: '#2a2a34',
							shadowBlur: 5,
							shadowOffsetY: 0,
							shadowOffsetX: 0,
							borderColor: '#2a2a34',
							borderWidth: 2,
						},
					});
					pieData1.push(gapData);

					pieData2.push({
						...chartData[i],
						itemStyle: {
							borderRadius: 10,
							color: colorList[i],
							opacity: 0.1,
							shadowColor: '#000',
							shadowBlur: 1,
							shadowOffsetY: 5,
							shadowOffsetX: 0,
						},
					});
					pieData2.push(gapData);
				}

				let option = {
					title: [
						{
							text: '75.0%',
							x: '51%',
							y: '43%',
							textAlign: 'center',
							textStyle: {
								fontSize: fontSize(0.35),
								fontWeight: '500',
								color: '#98b5d2',
								textAlign: 'center',
								textShadowColor: '#000',
								textShadowBlur: '1',
								textShadowOffsetX: 2,
								textShadowOffsetY: 2,
							},
						},
					],
					tooltip: {
						trigger: 'item',
					},

					color: colorList,

					series: [
						{
							type: 'pie',
							z: 3,
							roundCap: true,
							radius: ['55%', '65%'],
							center: ['52%', '50%'],
							label: {
								color: '#fff',
								fontSize: fontSize(0.14),
							},
							labelLine: {
								length: fontSize(0.2), //第一条线
								length2: fontSize(0.1),
								lineStyle: {
									width: fontSize(0.02),
								},
							},

							data: pieData1,
						},
						{
							type: 'pie',
							z: 2,
							radius: ['60%', '70%'],
							center: ['52%', '50%'],
							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
							silent: true,
							data: pieData2,
						},
					],
				};
				this.statusChart.setOption(option);
			},
		},
		beforeDestroy() {},
	};
</script>
<style scoped>
	#container {
		height: 100%;
		display: flex;
		overflow: visible;
		flex-direction: column;
		justify-content: center;

		.chart {
			width: 100%;
			flex: 1;
			margin: 0 auto;
		}
	}
</style>
